<template>
  <div class="da">
    <div class="zuo">
      <div class="shang">
        <el-card class="box-card">
          <div class="text item">
            <h1>数据统计</h1>
            <div class="shang_xia">
              <div class="shang_xiaZuo">
                <span>房间总数： 13</span>
                <span>居民总数： 123</span>
                <span>商店总数： 10</span>
              </div>
              <div class="shang_xiaYou">
                <span>报修总数 55 处</span>
                <span>投诉总数 214 次</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <div class="zhong">
        <el-card class="box-card">
          <div class="text item">
            <h1>今日数据变动</h1>
            <div class="zhong_xia">
              <span>新增维修：2处</span>
              <i>|</i>
              <span>未处理报修： 17 处</span>
              <i>|</i>
              <span>新增投诉： 0 次</span>
              <i>|</i>
              <span>未处理投诉： 214 次</span>
            </div>
          </div>
        </el-card>
      </div>

      <div></div>
    </div>
    <div class="you">
      <div class="you_shang">
        <el-card class="box-card1">
          <h1>待维修处理</h1>
          <div class="text item"></div>
        </el-card>
      </div>
      <div class="you_xia">
        <el-card class="box-card2">
          <h1>待投诉处理</h1>
          <div class="text item"></div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'shouyeV',

  data () {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
// 左侧
.zuo {
  width: 70%;
  height: 600px;
  background: pink;
  float: left;
  .shang {
    padding: 20px;

    .box-card {
      width: 847px;
      height: 95px;
      .shang_xia {
        margin-top: 15px;
        .shang_xiaZuo {
          float: left;
          span {
            margin-right: 30px;
          }
        }
        .shang_xiaYou {
          float: right;
          span {
            margin-left: 45px;
          }
        }
      }
    }
  }
  .zhong {
    padding: 20px;
    .box-card {
      width: 847px;
      height: 113px;
      .zhong_xia {
        border: 1px solid #ddd;
        border-bottom: 0px;
        width: 847px;
        height: 42px;
        margin-top: 32px;
        // margin-top: ;
        span {
          margin: 0 35px;
          line-height: 42px;
        }
      }
    }
  }
}
// 右侧
.you {
  width: 25%;
  height: 600px;
  background: yellow;
  float: right;
  .you_shang {
    padding: 20px;
    .box-card1 {
      width: 275px;
      height: 241px;
    }
  }
  .you_xia{
    padding: 20px;
    .box-card2 {
    width: 275px;
    height: 241px;
  }
  }

}
</style>
